<!--
    左侧导航栏
-->
<template>
  <antMenu
    class="left-nav-menu"
    id="vNavMenu"
    v-model:openKeys="openKeys"
    v-model:selectedKeys="selectedKeys"
    mode="inline"
    @click="handleClick"
  >
    <sub-menu :navRoutes="routes"></sub-menu>
  </antMenu>
</template>

<script setup lang="ts">
import { ref, watch, computed, VNodeChild  } from 'vue'
import { useRouter, RouteRecordRaw } from 'vue-router'
import { useStore } from 'vuex'
import { Menu as antMenu } from 'ant-design-vue'
import subMenu from './subMenu.vue'
// menu点击事件类型
interface MenuInfo {
  key: string;
  keyPath: string[];
  item: any;
  domEvent: MouseEvent;
}
// 路由类型
interface IRoutes {
  routes: RouteRecordRaw[]
}
const props = defineProps<IRoutes>()
const router = useRouter()
const store = useStore()

// 菜单栏展开状态设置
const openKeys = ref(store.state.common.openKeys)
watch(
  () => openKeys.value,
  () => {
    store.commit('setCommonStore', {
      openKeys: openKeys
    })
  }
)
// 菜单选中状态设置
const selectedKeys = computed(() => {
  return [router.currentRoute.value.path]
})

const judgeHasRoute = (includesRouterTabs, currentRoute) => {
  for (let i = 0; i < includesRouterTabs.length; i++) {
    if (includesRouterTabs[i].name === currentRoute.name) {
      return true
    }
  }
  return false
}

// 处理菜单栏点击逻辑
const handleClick = (e:MenuInfo) => {
  let includesRouterTabs = store.state.common.includesRouterTabs ? store.state.common.includesRouterTabs : []
  let includesRouters = store.state.common.includesRouters ? store.state.common.includesRouters : []
  let currentRoute = {
    name: e.item.name,
    title: e.item.title,
    path: e.key
  }
  if (!judgeHasRoute(includesRouterTabs, currentRoute)) {
    includesRouterTabs.push(currentRoute)
    includesRouters.push(e.item.name)
  }
  store.commit('setCommonStore', {
    includesRouterTabs,
    includesRouters,
    currentName: e.item.name,
    currentPath: e.key
  })
  // selectedKeys.value = [e.key]
  router.push({
    path: e.key
  })
}
</script>

<style lang="less" scoped>
.left-nav-menu {
  border-right: none;
  background: var(--themeBackColor);
}
</style>
